<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.container {
			height: 100vh;
			width: 100vh;
			background-color: skyblue;
			display: flex;
			flex-direction: column;
		}

		.top {
			flex: 1;
			display: flex;
		}

		.bottom {
			flex: 2;
			display: flex;
		}

		.item {
			flex: 1;
		}

		.left {
			flex: 1;
			display: flex;
			flex-direction: column;
		}
		.right {
			flex: 2;
		}
	</style>

</head>

<body>
	<div class="container">
		<div class="top">
			<div class="item" style="background: red;">A</div>
			<div class="item" style="background: yellow;">B</div>
			<div class="item" style="background: blue;">C</div>
		</div>
		<div class="bottom">
			<div class="left">
				<div class="item" style="background: green;">D</div>
				<div class="item" style="background: pink;">E</div>
			</div>
			<div class="right" style="background: orange;">F</div>
		</div>
	</div>

</body>

</html>